<template>
  <el-row>
    <el-color>
    <el-card>
        <div slot="header" class="clearfix">
     <span>物资购买</span>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="种类">
    <el-select v-model="formInline.user" placeholder="种类">
      
      <el-option label="消毒物品" value="消毒物品" ></el-option>
      <el-option label="口罩" value="口罩"></el-option>
      <el-option label="手套" value="手套"></el-option>
      <el-option label="体温计" value="体温计"></el-option>
      <el-option label="防护面罩" value="防护面罩"></el-option>
      <el-option label="防护服" value="防护服"></el-option>
      <el-option label="防护镜" value="防护镜"></el-option>
      <el-option label="其他" value="其他"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="名称">
    <el-select v-model="formInline.region" placeholder="名称">
      <el-option label="75%消毒酒精" value="75%消毒酒精"></el-option>
      <el-option label="75%酒精免洗凝胶" value="75%酒精免洗凝胶"></el-option>
      <el-option label="84消毒液" value="84消毒液"></el-option>
      <el-option label="75%酒精消毒湿巾" value="75%酒精消毒湿巾"></el-option>
      <el-option label="紫外线消毒灯" value="紫外线消毒灯"></el-option>
      <el-option label="N95医用防护口罩" value="N95医用防护口罩"></el-option>
      <el-option label="医用外科口罩" value="医用外科口罩"></el-option>
      <el-option label="一次性医院口罩" value="一次性医院口罩"></el-option>
      <el-option label="医用检查手套" value="医用检查手套"></el-option>
      <el-option label="一次性手套" value="一次性手套"></el-option>
      <el-option label="医用电子体温计" value="医用电子体温计"></el-option>
      <el-option label="医用红外线体温枪" value="医用红外线体温枪"></el-option>
      <el-option label="防护面罩" value="防护面罩"></el-option>
      <el-option label="医用一次性防护服" value="医用一次性防护服"></el-option>
      <el-option label="护目镜" value="护目镜"></el-option>
      <el-option label="喷壶" value="喷壶"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="规格">
    <el-select v-model="formInline.guige" placeholder="名称">
      <el-option label="100ml" value="100ml"></el-option>
      <el-option label="500ml" value="500ml"></el-option>
      <el-option label="50片" value="50片"></el-option>
      <el-option label="69W" value="69W"></el-option>
      <el-option label="10片" value="10片"></el-option>
      <el-option label="100只" value="100只"></el-option>
      <el-option label="1" value="1"></el-option>
      <el-option label="1" value="1"></el-option>
      
    </el-select>
  </el-form-item>
  <el-form-item label="单位">
    <el-select v-model="formInline.danwei" placeholder="名称">
      <el-option label="瓶" value="瓶"></el-option>
      <el-option label="盒" value="盒"></el-option>
      <el-option label="台" value="台"></el-option>
      <el-option label="袋" value="袋"></el-option>
      <el-option label="盒子" value="盒子"></el-option>
      <el-option label="支" value="支"></el-option>
      <el-option label="个" value="个"></el-option>
      <el-option label="件" value="件"></el-option>
      <el-option label="副" value="副"></el-option>
     
    </el-select>
  </el-form-item>
  <el-form-item label="数量">  
    <el-input v-model="formInline.numbers" ></el-input>
    
  </el-form-item>
  <el-form-item >  
    <el-button class="btn" type="primary" @click="open">确定</el-button>
    
    
  </el-form-item>

</el-form>

    </el-card>
  </el-color>
  <el-color>
    <el-card>
        <div slot="header" class="clearfix">
            <span>
                物资购买记录
            </span>
        </div>
        <div>
        <el-table :data="fillterAndPageData" style="width: 100%">
            <el-table-column prop="assort" label="种类" width="150"></el-table-column>
            <el-table-column prop="mingcheng" label="名称" width="150"></el-table-column>
            <el-table-column prop="specs" label="规格" width="150"></el-table-column>
            <el-table-column prop="unity" label="单位" width="150"></el-table-column>
            <el-table-column prop="stock" label="数量" width="150"></el-table-column>
            <el-table-column prop="state" label="状态" width="150">
              <template slot-scope="scope">
        <el-tag
          :type="scope.row.state === '已购买' ?  'success':'danger' "
          disable-transitions>{{scope.row.state}}</el-tag>
         
      </template>
            </el-table-column>
           
          
        </el-table>
        <el-pagination
      
      @current-change="handleCurrentChange"
      :current-page.sync="pagenum"
      :page-size="6"
      layout="total,prev, pager, next"
      :total="this.total">
    </el-pagination>
      
    </div>
    </el-card>
  </el-color>
  </el-row>
    
</template>



<script>


    export default {
      data() {
        return {
           fillterAndPageData:'',
           pagenum:'',
          formInline: {
            user: '',
            region: '',
            numbers:'',
            guige:'',
            danwei:'',
            state:'已购买'

          }
        }
      },
      created(){
        this.query();
        this.formInline.user=this.$route.query.assort;
        this.formInline.region=this.$route.query.mingcheng;
        this.formInline.guige=this.$route.query.specs;
        this.formInline.danwei=this.$route.query.unity;
        },
      methods:{
        query(){
            fetch("http://1.15.134.100:9999/wuzi1?pageNumber="+this.pagenum,
            {
              method:"GET",
              headers:{
                    'token': localStorage.getItem('token'),
                },
            })
            .then(res => res.json()).then(res =>{
                this.fillterAndPageData=res.data.list
                this.total=res.data.total
                
            

            })
        },
        open() {
        
        this.$confirm('确定购买?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => { 
            this.buy()
            this.insert()
          this.$message({
            type: 'success',
            message: '购买成功!'
          });
          this.$router.go(0);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消购买'
          });          
        });
      },
      buy(){
        fetch("http://1.15.134.100:9999/buy",{
            method:"POST",
            headers: {
                    'Content-type': 'application/json',
                    'token': localStorage.getItem('token'),
                 
                  
                    
                },
            body:JSON.stringify({
                mingcheng: this.formInline.region,
                stock:this.formInline.numbers
            })

            
        }).then(response=>response.json())
        .then(data=>{
             console.log(data)
        });
      },
      insert(){
        fetch("http://1.15.134.100:9999/wuzi1",{
            method:"POST",
            headers: {
                    'Content-type': 'application/json',
                    
                    'token': localStorage.getItem('token'),
                
                },
            body:JSON.stringify({
               assort:this.formInline.user,
               mingcheng:this.formInline.region,
               specs:this.formInline.guige,
               unity:this.formInline.danwei,
               stock:this.formInline.numbers,
               state:this.formInline.state


                
            })

            
        }).then(response=>response.json())
        .then(data=>{
             console.log(data)

        });
      },
    
      handleCurrentChange(pagenum) {
      this.pagenum=pagenum;
        this.query()
      }
     
     
    }
    }
  </script>

  <style>
    .el-form{
        display:flex;
    }
    .clearfix{
        display:flex;
    }
    .btn{
      margin-top: 30px;
    }
    .el-pagination{
    margin-left: 800px;
}
  </style>